VueJS Plugins Examples
Some VueJS plugins examples ad-hoc designed on the default BIMData basic plugins.
Pick stratigraphic units in order to annotate archaeological units on the model; Isolate Elements for graphically quarying objects and their classification; Modals for the purpose of adding information via pop-up windows.
Pick Stratigraphic Units
<![CDATA[
viewer.registerPlugins([{
name: "Pick Stratigraphic units",
component: {
template: `
<div style="width: 225px">
<h4>Pick stratigraphic units</h4>
<select v-model="priority" style="width: 100%; height: 30px">
 
<option disabled value="">Stratigraphic Units</option>
 
<option value="low">US</option>
<option value="medium">USR</option>
<option value="high">USM</option>
</select>
<input type="text" v-model="index" style="text-align: center; height: 30px">
 
<button @click="onLink_0Click" class="btn2-group" style="height:30px">Help</button>
 
<button @click="onLink_1Click" class="btn2-group" style="height:30px">Remove selected unit</button>
 
<button @click="onLink_2Click" class="btn2-group" style="height:30px">Remove all units</button>
</div>
`,
data() {
return {
priority: "",
pickSubscription: null,
index: 1
};
},
methods: {
onLink_0Click() {
this.$plugins.modalManager.pushModal({
template: `
<div style="margin:50px; width: 800px">
<h2 style="text-align: justify">Pick stratigraphic units - help</h2>
<p>1) Select stratigraphic units typology and units number</p>
<p>2) Pick units on highlight object of the model</p>
<p>3) Picked units will appear on the objects center of mass</p>
 
<p>- Press "Remove selected units" button in order to delete selected unit (object must be selected)</p>
<p>- Press "Remove all units" button in order to delete ALL units</p>
 
<h3 style="text-align: justify">ATTENTION!</h3>
<p>This tool has no memory and then no save option! Once you finished picking units you can save a screeshot</p>
</div>`
})
},
onLink_1Click() {
this.$hub.emit("delete-annotations", {
ids: this.$utils.getSelectedObjectIds()
});
},
onLink_2Click() {
this.$hub.emit("clear-annotations")
},
},
props: ["active"],
watch: {
active: {
handler(active) {
const viewer3D = this.$plugins.viewer3D;
viewer3D.selectOnClick = !active;
// viewer3D.highlightOnHover = !active; // To remove the highlight on hover
if (active) {
document.body.style.setProperty("cursor", "copy", "important");
this.pickSubscription = viewer3D.xeokit.cameraControl.on(
"picked",
pickResult => {
if (!this.priority) {
return this.$hub.emit('alert', {
type: 'warning',
message: 'Please select a stratigraphic units typology'
});
}
if (!pickResult || !pickResult.entity) return;
this.$hub.emit("create-annotations", {
ids: [pickResult.entity.id],
index: this.index,
priority: this.priority
});
}
);
}
}
}
}
},
display: {
iconPosition: "left",
content: "simple"
},
icon: {
imgUri: 'https://img.icons8.com/ios-filled/35/000000/circled-dot.png'
},
keepActive: true,
tooltip: "stratigraphic.tooltip",
i18n: {
en: {
stratigraphic: {
tooltip: "Pick Stratigraphic Units",
}
}
},
}])
]]>
Isolate Elements
<![CDATA[
viewer.registerPlugins([{
name: "Isolate Elements",
component: {
template: `
<div style="width:230px" class="btn-group">
<button @click="onIsolateWallsClick">Walls</button>
<button @click="onIsolateColumnsClick">Columns</button>
<button @click="onIsolateFootingsClick">Footings</button>
<button @click="onIsolateWindowsClick">Windows</button>
<button @click="onIsolateBeamsClick">Beams</button>
<button @click="onIsolateSlabClick">Slabs</button>
<button @click="onIsolateStairsClick">Stairs</button>
<button @click="onIsolateDoorsClick">Doors</button>
<button @click="onIsolateFurnituresClick">Furnitures</button>
<button @click="onIsolateElementClick">Building Element</button>
<button @click="onIsolateRoofClick">Roof</button>
<button @click="onUnisolateClick" style="background-color: #ececec">Reset scene</button>
</div>`,
methods: {
onIsolateWallsClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("wall")
.map(object => object.uuid)
});
},
onIsolateColumnsClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("column")
.map(object => object.uuid)
});
},
onIsolateFootingsClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("footing")
.map(object => object.uuid)
});
},
onIsolateBeamsClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("beam")
.map(object => object.uuid)
});
},
onIsolateSlabClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("slab")
.map(object => object.uuid)
});
},
onIsolateStairsClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("stair")
.map(object => object.uuid)
});
},
onIsolateDoorsClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("door")
.map(object => object.uuid)
});
},
onIsolateFurnituresClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("furnishing_element")
.map(object => object.uuid)
});
},
onIsolateElementClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("building_element")
.map(object => object.uuid)
});
},
onIsolateWindowsClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("window")
.map(object => object.uuid)
});
},
onIsolateRoofClick() {
this.$hub.emit("isolate-objects", {
ids: this.$utils.getAllObjectsOfType("roof")
.map(object => object.uuid)
});
},
onUnisolateClick() {
this.$hub.emit("unisolate-all-objects");
}
}
},
display: {
iconPosition: 'left',
content: 'simple'
},
icon: {
imgUri: 'https://img.icons8.com/ios-filled/35/000000/select-cell.png',
},
keepActive: true,
tooltip: "myCustomPlugin.tooltip",
i18n: {
en: {
myCustomPlugin: {
tooltip: "Isolate Elements",
}
},
}
}]);
]]>
Modals
<![CDATA[
viewer.registerPlugins([{
name: "modals",
component: {
render() {
return null;
},
created() {
this.$plugins.modalManager.pushModal({
template: `
<div style="margin:70px; width: 280px; text-align: center">
<h1>SAMPLE TITLE</h1>
<a>SAMPLE SUB TITLE</a>
</div>`
});
},
},
}]);
]]>